<template>
	<view class="box">
		<!-- 公告列表 -->
		<view class="card" v-for="(item,index) in noticeList" @click.native="noticeDetail(item.id)" :key="index">
			<image class="card-img" :src="item.imageSrc" mode="aspectFill"></image>
			<view class='card-title'>{{item.title | subTitle }}</view >
			<view class="card-content">
				{{item.content | subContent}}
			</view>
			<view class="line"></view>
			<view class="avater-time">
				<image class="img" :src="getimageBaseUrl(getAvatar(item.id))" mode=""></image>
				<view class="digest">
					{{item.digest}}
				</view>
				<view class='time'>{{item.updateTime}}</view >
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 公告编号
				id: 0,

				noticeList: []
			};
		},
		filters:{
			subContent(content){
				 return  content.substr(0,20)+',另外详见…'
			},
			subTitle(title){
				if(title.length>18) return  title.substr(0,18)+'...'
				return title
			}
		},
		//下拉触底
		onReachBottom() {
			this.getNoticeList();
		},

		methods: {
			getNoticeList() {
				console.log("1111")
				this.$request({
					url: `${this.$baseUrl}/notice/allNotice/${this.noticeList.length}`,
					method: 'GET',
				}).then(res => {
					this.noticeList = [...this.noticeList, ...res.data.data]
				}).catch(res => {
					console.log(res)
				})
			},
			noticeDetail(id) {
				// console.log(id)
				uni.navigateTo({
					url: '/pages/noticeDetail/noticeDetail?id=' + id,
				})
			},

			//下拉刷新
			onPullDownRefresh() {
				console.log('refresh');
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
		},

		onLoad() {
			this.getNoticeList()
		}
	}
</script>

<style lang="scss">
	.box {
		background-color: #F5F5F5;
		padding-top: 1rpx;
		padding-bottom: 46rpx;
		.card {
			margin-top: 32rpx;
			margin-left: 32rpx;
			height: 588rpx;
			width: 686rpx;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 1);

			.card-img {
				margin-top: 32rpx;
				margin-left: 32rpx;
				width: 622rpx;
				height: 320rpx;
				border-radius: 8rpx;
				border: 2rpx solid  #e3e3e3;
			}

			.card-title {
				margin-top: 24rpx;
				margin-left: 32rpx;
				width: 622rpx;
				height: 48rpx;
				font-weight: 600;
				color: rgba(51, 51, 51, 1);
				font-size: 30rpx;
				line-height: 48rpx;
			}
			.card-content {
				margin-top: 4rpx;
				margin-left: 32rpx;
				width: 622rpx;
				height: 36rpx;
				color: rgba(153, 153, 153, 1);
				line-height: 18px;
				font-weight: 400;
				font-size: 24rpx;
			}
			.line {
				width: 622rpx;
				height: 2rpx;
				border-bottom: 2rpx solid rgba(221, 221, 221, 1.0); 
				margin-left: 32rpx;
				margin-top: 28rpx;
			}
			.avater-time {
				margin-top: 24rpx;
				margin-left: 32rpx;
				display: flex;
				.img {
					
					width: 40rpx;
					height: 40rpx;
					border-radius: 100%;
				}
				.digest {
					margin-left: 12rpx;
					height: 32rpx;
					margin-top: 4rpx;
					font-size: 24rpx;
					color: rgba(51, 51, 51, 1);
					font-weight: 400;
				}
				.time {
					height: 36rpx;
					margin-left: 222rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
					margin-top: 6rpx;
					ine-height: 36rpx;
					
				}
			}
		}
	}
</style>
